<!-- 资源列表 -->
<template>
  <div class="breadcrumb-style">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
      <el-breadcrumb-item>资源列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="table">
    <el-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      border
    >
      <el-table-column align="center" property="id" label="编号" width="120" />
      <el-table-column align="center" property="name" label="资源名称" width="260" />
      <el-table-column align="center" property="url" label="资源路径" width="260" />
      <el-table-column align="center" property="description" label="描述" width="300" />
      <el-table-column align="center" property="createTime" label="添加时间" width="300">
        <template #default="scope">
          <div>
            {{
              scope.row.createTime
                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    <el-pagination
      :total="27"
      :page-sizes="[10, 30, 60, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="pageClick"
      @size-change="handleSizeChange"
      :background="background"
    />
  </div>
</template>

<script lang="ts" setup>
import { ElTable } from "element-plus";
import { computed, ref } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import { resource } from "@/request/api";
import { number } from "echarts";
import * as dayjs from "dayjs";
const background = ref(true);
let tableData = ref([]); //list渲染列表
let pageNum = ref(1); // 当前页数
let pageSize = ref(10); //每页几条
let total = ref(27); //总页数
// 在这里获取初始的数据
let A = () => {
  resource
    .ziYuanLieBiao({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    })
    .then((res) => {
      // console.log(res);
      tableData.value = res.list;
      total.value = res.total;
    });
};
A();
const language = ref("zh-cn");
const locale = computed(() => (language.value === "zh-cn" ? zhCn : en));

interface User {
  name: string;
  url: string;
  id: number;
  createTime: string;
  description: string;
}

const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  pageSize.value = val;
  A();
};
const pageClick = (val: number) => {
  // console.log(val);
  pageNum.value = val;
  A();
};
</script>

<style scoped lang="scss">
.breadcrumb-style {
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.pagination {
  margin: 20px 0;
  padding-right: 20px;
  float: right;
}
.table {
  font-size: 12px;
}
</style>
